<script lang="ts" setup>
  import DetailName from './Sub/Name.vue';
  import DetailStars from './Sub/Stars.vue';
  import DetailAddress from './Sub/Address.vue';
  import DetailPrice from './Sub/Price.vue';
  import DetailOpenDateTime from './Sub/OpenDateTime.vue';
  import DetailTip from './Sub/Tip.vue';
  import DetailIntro from './Sub/Intro.vue';
  import DetailTicketInfo from './Sub/TicketInfo.vue';

  interface IProps {
    name: string;
    star: number;
    score: string;
    address: string;
    price: number;
    createTime: string | Date | number;
    description: string;
    recom: string;
    keywords: string;

    tip: string;
    ticketInfo: string;
  }

  defineOptions({
    name: 'ViewDetail'
  });

  const props = withDefaults(defineProps<Partial<IProps>>(), {
    name: '',
    star: 0,
    score: '',
    address: '',
    price: 0,
    createTime: '',
    description: '-',
    recom: '-',
    keywords: '-',

    tip: '-',
    ticketInfo: '-',
  });
</script>

<template>
  <div class="view-detail">
    <detail-name :name="props.name" />
    <detail-stars :star-num="props.star" :score="props.score" />
    <detail-address :address="props.address" />
    <detail-price :price="props.price" />
    <detail-open-date-time :open-date-time="props.createTime" />
    <detail-tip :tip="props.tip" />
    <detail-intro :intro="props.description" />
    <detail-ticket-info :ticket-info="props.ticketInfo" />
  </div>
</template>